<template>
  <div class="detail_content">
    <ga-layout>
      <ga-layout>
        <!-- <ga-layout-sider :style="{ width: '180px' }"> -->
        <ga-layout-sider :style="{ width: '180px', boxShadow: 'none' }">
          <ga-menu
            :style="{ width: '180px', height: '100%' }"
            @menu-item-click="onClickMenuItem"
            :default-selected-keys="[curKeyValue]"
          >
            <p class="back" @click="$router.go(-1)">
              <icon-arrow-left /> 返回列表
            </p>
            <!-- <p class="back" @click="goBack">
              <icon-arrow-left /> 返回列表
            </p> -->
            <ga-menu-item v-for="item in menuList" :key="item.key">
              <template #icon>
                <SvgIcon class="svg_style" :icon-class="item.key" />
              </template>
              {{ item.label }}
            </ga-menu-item>
          </ga-menu>
        </ga-layout-sider>
        <ga-layout-content>
          <div class="app_content_container">
            <slot name="content_area"></slot>
          </div>
        </ga-layout-content>
      </ga-layout>
    </ga-layout>
  </div>
</template>

<script setup>
import { defineProps, toRefs, onMounted } from "vue";
import SvgIcon from "@/components/SvgIcon";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
  menuList: {
    required: true,
    default: [],
  },
  curKeyValue: {
    required: true,
    defalut: "",
  },
});
const route = useRoute();
const router = useRouter();
const { menuList } = toRefs(props);
const emit = defineEmits(["onClickMenuItem"]);

// 点击当前的key
const onClickMenuItem = (key) => {
  emit("onClickMenuItem", key);
};

const goBack = () => {
  const path = route.path.includes("redis") ? "/redisList" : "/kafkaList";
  router.push(path);
};
</script>

<style lang="scss" scoped>
.back {
  height: 44px;
  color: #0f5ef7;
  font-weight: 500;
  line-height: 44px;
  padding: 0 16px;
  cursor: pointer;
}

:deep(.garco-menu-item) {
  height: 38px;
  line-height: 38px;
  margin-bottom: 8px;
  background: #f2f4f7;

  &:hover {
    background: #e2e8f4 !important;
  }
}

:deep(.garco-menu-vertical .garco-menu-item.garco-menu-has-icon) {
  background: #f2f4f7;
}

:deep(.garco-menu-vertical .garco-menu-inner) {
  background: #f2f4f7;
}

:deep(.garco-menu-item.garco-menu-has-icon .garco-menu-title) {
  color: #011948;
}

:deep(.garco-menu-light .garco-menu-item.garco-menu-selected) {
  background-color: #0f5ef7 !important;

  .garco-menu-title {
    color: #fff !important;
  }

  .svg_style {
    stroke: #fff;
    fill: #fff;
  }
}

:deep(.garco-menu-icon) {
  margin-right: 8px !important;
  color: #011948 !important;
}

:deep(.garco-layout-has-sider > .garco-layout-content) {
  height: calc(100vh - 64px);
  background: #fff;
  overflow-y: auto;
  border-radius: 4px;
}

.svg_style {
  fill: #011948;
  font-size: 16px;
}
</style>
